import React from 'react';
import { DetailDialogProps } from './types';

const DetailDialog: React.FC<DetailDialogProps> = ({ record, open, onClose, onRerun, onDownload }) => {
  if (!open || !record) {
    return null;
  }

  const statusClassName = () => {
    switch (record.status) {
      case 'success':
        return 'text-green-700 dark:text-green-300 bg-green-100 dark:bg-green-900';
      case 'error':
        return 'text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-900';
      case 'waiting':
        return 'text-yellow-700 dark:text-yellow-300 bg-yellow-100 dark:bg-yellow-900';
      default:
        return 'text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700';
    }
  };

  const statusText = () => {
    switch (record.status) {
      case 'success':
        return '成功';
      case 'error':
        return '错误';
      case 'waiting':
        return '待处理';
      default:
        return '未知';
    }
  };

  return (
    <div className="fixed inset-0 bg-gray-600 dark:bg-gray-900 bg-opacity-50 dark:bg-opacity-70 overflow-y-auto h-full w-full z-50 flex items-center justify-center">
      <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow max-w-4xl mx-auto w-full max-h-[90vh] overflow-hidden">
        {/* 头部 */}
        <div className="flex items-center justify-between p-4 border-b dark:border-gray-700">
          <div className="flex items-center">
            <div className={`w-6 h-6 rounded-full ${statusClassName()} flex items-center justify-center mr-2`}>
              {record.status === 'success' && (
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
                </svg>
              )}
              {record.status === 'error' && (
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
              )}
              {record.status === 'waiting' && (
                <svg className="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                  <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 5.757v8.486M5.757 10h8.486"/>
                </svg>
              )}
            </div>
            <h3 className="text-xl font-semibold text-gray-900 dark:text-white">{record.taskTitle}</h3>
            <span className={`ml-3 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusClassName()}`}>
              {statusText()}
            </span>
          </div>
          <button
            type="button"
            className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-700 dark:hover:text-white rounded-lg text-sm p-1.5"
            onClick={onClose}
          >
            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd"></path>
            </svg>
          </button>
        </div>

        {/* 内容 */}
        <div className="p-6 overflow-y-auto max-h-[calc(90vh-8rem)]">
          <div className="mb-6">
            <h4 className="text-lg font-medium text-gray-900 dark:text-white mb-2">任务详情</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">类别</p>
                <p className="font-medium text-gray-900 dark:text-white">{record.category}</p>
              </div>
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">持续时间</p>
                <p className="font-medium text-gray-900 dark:text-white">{record.duration}</p>
              </div>
              <div className="md:col-span-2">
                <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">任务指南</p>
                <p className="font-medium text-gray-900 dark:text-white">{record.taskGuide}</p>
              </div>
            </div>
          </div>

          {/* 错误详情 */}
          {record.error && (
            <div className="mb-6">
              <h4 className="text-lg font-medium text-gray-900 dark:text-white mb-2">错误详情</h4>
              <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md p-4">
                <p className="text-red-700 dark:text-red-400">{record.error}</p>
              </div>
            </div>
          )}

          {/* 执行日志 */}
          <div className="mb-6">
            <h4 className="text-lg font-medium text-gray-900 dark:text-white mb-2">执行日志</h4>
            <div className="bg-gray-50 dark:bg-gray-700 rounded-md p-4 font-mono text-sm">
              {record.logs.map((log, index) => (
                <div key={index} className="mb-1">
                  <span className="text-gray-500 dark:text-gray-400">[{log.createdAt}]</span> <span className="text-gray-900 dark:text-gray-300">{log.message}</span>
                </div>
              ))}
            </div>
          </div>

          {/* 截图 */}
          {record.screenshot && (
            <div className="mb-6">
              <h4 className="text-lg font-medium text-gray-900 dark:text-white mb-2">截图</h4>
              <div className="border border-gray-200 dark:border-gray-700 rounded-md overflow-hidden">
                <div className="relative w-full h-[300px] bg-gray-50 dark:bg-gray-800">
                  <img 
                    src={record.screenshot} 
                    alt="执行截图" 
                    className="w-full h-full object-contain"
                    onError={(e) => {
                      const target = e.target as HTMLImageElement;
                      target.style.display = 'none';
                      target.parentElement?.classList.add('flex', 'items-center', 'justify-center');
                      const placeholder = document.createElement('div');
                      placeholder.className = 'text-gray-400 dark:text-gray-500 flex flex-col items-center';
                      placeholder.innerHTML = `
                        <svg class="w-12 h-12 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        <span>暂无截图</span>
                      `;
                      target.parentElement?.appendChild(placeholder);
                    }}
                  />
                </div>
              </div>
            </div>
          )}

          {/* 输出文件 */}
          {record.outputFiles && record.outputFiles.length > 0 && (
            <div>
              <h4 className="text-lg font-medium text-gray-900 dark:text-white mb-2">输出文件</h4>
              <ul className="space-y-2">
                {record.outputFiles.map((file) => (
                  <li key={file.id} className="flex items-center justify-between bg-gray-50 dark:bg-gray-700 p-3 rounded-md">
                    <div className="flex items-center">
                      <svg className="w-5 h-5 text-gray-500 dark:text-gray-400 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 5V1H1v18h18V5h-4ZM8 13v-4m-2 2h4"/>
                      </svg>
                      <div>
                        <p className="font-medium text-gray-900 dark:text-white">{file.name}</p>
                        <p className="text-xs text-gray-500 dark:text-gray-400">{file.type} · {(file.size / 1024).toFixed(2)} KB</p>
                      </div>
                    </div>
                    <a
                      onClick={() => {
                        const taskId = file.id.split(':')[0];
                        onDownload(taskId, file.name);
                      }}
                      download
                      className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 flex items-center text-sm font-medium cursor-pointer"
                    >
                      <svg className="w-4 h-4 mr-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 14v-4m-4 0 4-4 4 4m-9 4h10"/>
                      </svg>
                      下载
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>

        {/* 底部 */}
        <div className="flex items-center justify-end space-x-2 p-4 border-t dark:border-gray-700">
          <button
            type="button"
            className="py-2 px-4 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800"
            onClick={onClose}
          >
            关闭
          </button>
          <button
            type="button"
            className="py-2 px-4 bg-blue-600 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800"
            onClick={() => onRerun(record.id)}
          >
            重新运行任务
          </button>
        </div>
      </div>
    </div>
  );
};

export default DetailDialog; 